<template>
  <div >
      <el-button type="goon1" class="print no-print" @click="print()" size="small">打印</el-button>
      <!-- style="height:4px;overflow:hidden" -->
      <div id="print" ref="print" class="block" >
        <div  v-for="(item,index) in selectArrShow" :key="index" style="height：300px;page-break-after:always">
          <div>
            <h1 style="text-align:center;font-size:20px">商户缴费通知单</h1>
          </div>
          <div class="mainImg">
            <img src="@/assets/img/logo.png" alt="">
            <!-- <span>{{tableData.focusRow.storeNa}}</span> -->
            <div style="font-size:16px;">{{item.companyFullNa}}</div>
          </div>
          <table border="0" cellspacing="0" cellpadding="0" >
            <tr>
              <td>所属期间</td>
              <td colspan="3">20210101</td>
              <td>发单日期</td>
              <td></td>
            </tr>
            <tr>
              <td>商户名称</td>
              <td>{{item.partnerNa}}</td>
              <td>楼层</td>
              <td>{{item.propertyPlaceId}}</td>
              <td>铺位编号</td>
              <td>{{}}</td>
            </tr>
            <tr>
              <td>店铺名称</td>
              <td>{{item.storeShortNa}}</td>
              <td>面积(m²)</td>
              <td>{{item.useArea}}</td>
              <td>合同编号</td>
              <td>{{item.contractNo}}</td>
            </tr>
            <!-- <tr v-for="(kind,index) in item.businessDealingsList" :key="index">
              <td>收费项目</td>
              <td>{{kind.contAuxNa}}</td>
              <td>计费标准</td>
              <td>{{kind.useArea}}</td>
              <td>金额(元)</td>
              <td id="moneyR">{{kind.arrears | customFormat(2)}}</td>
            </tr> -->
            <tr>
              <td>费用总计</td>
              <td colspan="3">{{item.businessDealingsListSumChina}}</td>
              <td>小计</td>
              <td id="moneyR">{{item.businessDealingsListSum}}</td>
            </tr>
          </table>
          <div class="mainBox">
            <span>制单部门：财务部 </span>
            <span>制单人:________ </span>
            <span>联系电话：{{notes.columnName7}} 若与合同不符，以合同为准</span>
          </div>
          <div>
            <p><span>1、</span>{{notes.columnName1}}</p>
            <p class="address">{{notes.columnName2}}</p>
            <p><span>2、</span>{{notes.columnName3}}</p>
            <p><span>3、</span>
              <span>收款方名称：</span>
              <span>账号：</span> 
              <span>开户行：</span>
            </p>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
    
    data(){
        return {
            selectArrShow:[
              {companyFullNa:"lalalalalall",partnerNa:11111111111},
              {companyFullNa:"lalalalalall",partnerNa:11111111111},
              {companyFullNa:"lalalalalall",partnerNa:11111111111},
              {companyFullNa:"lalalalalall",partnerNa:11111111111},
              {companyFullNa:"lalalalalall",partnerNa:11111111111},
              {companyFullNa:"lalalalalall",partnerNa:11111111111},
              {companyFullNa:"lalalalalall",partnerNa:11111111111},
              {companyFullNa:"lalalalalall",partnerNa:11111111111},
              {companyFullNa:"lalalalalall",partnerNa:11111111111},
              {companyFullNa:"lalalalalall",partnerNa:11111111111},
            ],
            notes:{}
        }
    },
    methods:{
      print() {
        this.$nextTick(()=>{
          this.$printTwo(this.$refs.print)
        })
      }
    }
}
</script>
<style scoped>
/* 去除页眉页脚 */
/* @page {
  size: auto A4 landscape;
  margin: 3mm;
} */
/* 增加padding */
/* #print {
  background: #fff;
  box-sizing: border-box;
  padding: 2rem 3rem 4rem;
} */
* {
  padding: 0;
  margin: 0;
  list-style-type: none;
  font-family: "微软雅黑";
  font-size: 16px;
}
.print{
  padding: 5px 8px;
}
.mainImg {
  display: flex;
  align-items: baseline;
}
.mainImg img {
  width: 110px;
  height: 60px;
}
table {
  width: 100%;
  border: none;
  border-bottom: 1px solid #000;
}

table tr td {
  border: 1px solid #000;
  border-right: none;
  height: 24px;
  text-align: center;
  line-height: 24px;
}
table tr td:nth-child(even){
  text-align:left;
  padding-left: 5px;
}
table  #moneyR{
  text-align: right;
  padding-right: 5px;

}
table tr td:last-of-type,
table tr th:last-of-type {
  border-right: 1px solid #000;
}
.mainBox{
  display: flex;
  justify-content: space-between;
}
.address{
  text-indent: 2em;
}
</style>